<template>
    <div>
        <div v-if="isLogin">
            <yd-cell-group>
                <yd-cell-item>
                    <span slot="left">
                        <div class="avatarBox">
                            <img :src="avatar ? avatar : 'assets/img/default/avatar.jpg'"/>
                        </div>
                        <div class="avatarDesc">
                            <span class="username">{{ loginUser }}</span><br/>
                            <span class="userdesc">{{ loginDesc }}</span>
                        </div>
                    </span>
                </yd-cell-item>
                <yd-cell-item arrow @click.native="showChangeInfo = true">
                    <span slot="left">修改资料</span>
                    <span slot="right">把自己写的更帅一点</span>
                </yd-cell-item>
                <yd-cell-item arrow @click.native="showChangePassword = true">
                    <span slot="left">修改密码</span>
                </yd-cell-item>
            </yd-cell-group>
            <yd-cell-group>
                <yd-cell-item arrow type="link" :href="{name: '薪资'}">
                    <span slot="left">我的薪资</span>
                    <span slot="right">好着急啊，工资发了吗？</span>
                </yd-cell-item>
                <yd-cell-item arrow type="link" :href="{name: '车位'}">
                    <span slot="left">车位预约</span>
                </yd-cell-item>
                <yd-cell-item arrow type="link" :href="{name: '投诉'}">
                    <span slot="left">投诉建议</span>
                </yd-cell-item>
            </yd-cell-group>
            <yd-button type="danger" size="large" @click.native="unbindAccount">解绑</yd-button>
        </div>
        <div v-if="!isLogin">
            <yd-navbar title="绑定账号"></yd-navbar>
            <yd-cell-group>
                <yd-cell-item>
                    <span slot="left">
                        <div class="avatarBox">
                            <img :src="avatar"/>
                        </div>
                        <div class="avatarDesc">
                            <span class="username">{{ loginUser }}</span><br/>
                            <span class="userdesc">{{ loginDesc }}</span>
                        </div>
                    </span>
                </yd-cell-item>
                <yd-cell-item>
                    <yd-icon name="ucenter" slot="icon"></yd-icon>
                    <span slot="left">账号：</span>
                    <yd-input slot="right" required v-model="username" max="20" placeholder="请输入用户名"></yd-input>
                </yd-cell-item>
                <yd-cell-item>
                    <yd-icon name="shield" slot="icon"></yd-icon>
                    <span slot="left">密码：</span>
                    <yd-input slot="right" type="password" v-model="password" placeholder="请输入密码"></yd-input>
                </yd-cell-item>
            </yd-cell-group>
            <yd-button type="primary" size="large" @click.native="bindAccount">提交</yd-button>
        </div>
        <yd-popup v-model="showChangeInfo" position="bottom" height="60%">
            <ui-changeinfo></ui-changeinfo>
        </yd-popup>
        <yd-popup v-model="showChangePassword" position="bottom" height="40%">
            <ui-changepassword></ui-changepassword>
        </yd-popup>
    </div>
</template>

<script>
module.exports = {
    data () {
        return {
            username: 'test',
            password: '',
            showChangePassword: false,
            showChangeInfo: false
        }
    },
    methods: {
        bindAccount () {
            this.$store.commit('auth', {username: this.username, password: this.password})
        },
        unbindAccount () {
            this.$store.commit('unauth')
        },
        changePassword () {
            this.showChangePassword = false
        },
        changeInfo () {
            this.showChangeInfo = false
        }
    },
    computed: {
        isLogin: {
            get () {
                return this.$store.getters.isLogin
            },
            set (value) {
                this.$store.commit('auth', value)
            }
        },
        loginUser () {
            return this.$store.getters.userName
        },
        loginDesc () {
            return this.$store.getters.userDesc
        },
        avatar () {
            return this.$store.getters.userAvatar
        }
    }
}
</script>

<style scoped>
.avatarBox {
    float: left;
    display: block;
    margin: .2rem;
    width: 1rem;
    height: 1rem;
    box-shadow: 0 0 .1rem 0px rgba(0, 0, 0, 0.3);
    border-radius: .1rem;
}
.avatarBox img {
    width: 1rem;
    height: 1rem;
    border-radius: .1rem;
}
.avatarDesc {
    padding-top: .3rem;
}
.username {
    padding-left: .4rem;
    font-weight: bold;
    font-size: .38rem;
    color: #000;
}
.userdesc {
    padding-left: .4rem;
    font-size: .28rem;
    color: #cfcfcf;
}
</style>